<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>远程控制电机</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <label for="url">连接地址</label>
        <input type="text" value="http://192.168.1.10:8080/websocket-simple" id="url" placeholder="请输入连接地址"/>
        <br>
        <button id="connect" onclick="connect();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    </div>

    <div id="conversationDiv">
        <div>
            <input type="button" value="打开电源" onclick="power(true);">
            <input type="button" value="关闭电源" onclick="power(false);">
        </div>
        <div>
            <label for="motor">电机功率调整</label>
            <input type="range" id="motor" value="0.00" min="0.00" max="1.00" step="0.01" onchange="changeMotorValue()"
                   style="display: block;margin: 0 auto;">
        </div>
        <div>
            <label for="debug">测试高电平占用时长（毫秒）</label>
            <input type="number" id="debug" value="1000">
            <input type="button" id="btnDebug" value="提交时数据">
        </div>
        <p id="result"></p>
        <p id="timeCha"></p>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            stompClient: null,
            url: '',
            status: {
                airplane: {
                    direction: {
                        vertical: 0,
                        horizontal: 0,
                        forwardBackward: 0,
                        rotate: 0,
                    },
                    gps: {
                        lng: 0,
                        lat: 0,
                        height: 0,
                        speed: 0,
                    },
                    posture: {
                        x: 0,
                        y: 0,
                        z: 0,
                    },
                    motors: [
                        {
                            gpio: {
                                pin: 0,
                                physPin: null,
                                wiringPiPin: null,
                                bcmPin: null,
                            },
                            dutyRatio: -0.5,
                            posture: 0.0,
                            run: false,
                            debugHighLevelTime: -1,
                            runtimeCycle: 0,
                            title: '电机',
                        }
                    ]
                },
                power: {
                    gpio: {
                        pin: 0,
                        physPin: null,
                        wiringPiPin: null,
                        bcmPin: null,
                    },
                    open: false,
                    startTime: null,
                    endTime: null,
                }
            }
        },
        methods: {
            connect() {
                var socket = new SockJS(this.url);
                var stompClient = Stomp.over(socket);
                stompClient.connect({}, (frame) => {
                    this.stompClient = stompClient;
                    console.log('Connected:' + frame);
                    // 订阅飞机状态数据信息
                    this.stompClient.subscribe('/topic/airplane/status', (response) => {
                        this.status = JSON.parse(response.body);
                    });
                });
            },
            disconnect() {

            },
            power() {

            },
            direction() {

            }
        },
        created() {
            console.log('created');
        },
        mounted() {
            console.log('mounted');

        },
        destroyed() {
            console.log('destroyed');

        }
    });
    var stompClient = null;

    // setConnected(false);

    function setConnected(connected) {
        document.getElementById("connect").disabled = connected;
        document.getElementById("disconnect").disabled = !connected;
        document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
    }

    function connect() {
        var socket = new SockJS($("#url").val());
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            setConnected(true);
            console.log('Connected:' + frame);
            // 另外再注册一下定时任务接受
            stompClient.subscribe('/topic/plane', function (response) {
                $("#timeCha").html(response.body);
                // var obj = JSON.parse(response.body);
            });
        });
    }

    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log('Disconnected');
    }

    function power(open) {
        stompClient.send("/motor/power", {}, JSON.stringify({'value': open}));
    }

    function changeMotorValue() {
        var val = $("#motor").val();
        $("#result").html('功率百分比：' + val);
        stompClient.send("/motor/value", {}, JSON.stringify({'value': val * 1.0}));
    }

    $("#btnDebug").click(function () {
        var val = $("#debug").val();
        $("#result").html('高电平毫秒：' + val);
        stompClient.send("/motor/debug", {}, JSON.stringify({'value': val * 1.0}));
    });
</script>

</body>
</html>